refactor: 모달 celuveat UI library 적용 #664
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
turtle601
requested changes
Dec 22, 2023
| @@ -1,8 +1,8 @@ | |||
| { | |||
| "editor.formatOnSave": true, | |||
| "editor.codeActionsOnSave": { | |||
| "source.fixAll.eslint": true, | |||
| "source.fixAll.stylelint": true | |||
| "source.fixAll.eslint": "explicit", | |||
There was a problem hiding this comment.
린트 설정을 사용자가 직접 수정하는 설정으로 하고 있는데 이렇게 바꾼 이유가??
- 코드의 획일화를 위해 true로 설정하는 것이 낫지 않을까요??
|
|
||
| function FormModal({ type, reviewId }: FormModalProps) { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
&& 를 고치는 방향을 위해서 라이브러리를 만들고 적용하는 것 아니였나용?? ( 그대로 남아있네용 ㅠㅠ )
| import React, { ReactNode } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import Exit from '~/assets/icons/exit.svg'; | ||
| import useCeluveatModal from '~/hooks/useCeluveatModal'; |
There was a problem hiding this comment.
요놈은 라이브러리 성격을 띄니까 라이브러리에서 선언을 해도 좋을 것 같아요~
| <Modal.Overlay as={<StyledOverlay />} /> | ||
| <StyledContent> | ||
| <StyledTitle>{title}</StyledTitle> | ||
| <StyledExitButton onClick={closeModal} /> |
There was a problem hiding this comment.
컴파운드 컴포넌트로 모달을 구현을 해주셨는데 컴파운드 컴포넌트를 사용하는 이유는 무엇이라고 생각하나요??
지금 구현하신 모달에서는 거의 모든 기능을 사용자에게 제어권을 위임하는 형태입니다.
이렇게 될 구현을 하실 경우 div 태그를 쓰는 것과 큰 차이가 없다고 판단됩니다.
Modal 라이브러리 사용도 Overlay만 사용되는데 라이브러리까지 만들어서 사용을 한다는 건 너무 오버 엔지니어링 같습니다 ㅜㅜ
각 모달 컴포넌트(Overlay, Content, ExitButton 등)의 요구사항을 잘 파악하고 해당 라이브러리에 각 기능들을 구현, 사용처에서는 해당 기능을 잘 몰라도 사용할 수 있게끔 구현하는 것이 최종 목적이라고 생각이 듭니다.
마지막으로 무엇을 해결하기 위해 컴파운드 컴포넌트를 썼는지 라이브러리를 왜 썼는지 그 이유와 근거에 대해서 더 잘 이해하고 사용해보았으면 더 많은 공부가 될 것 같아요~
게더 ㄱㄱ
…tor-모달-celuveat-ui-library-적용
shackstack
added a commit
that referenced
this pull request
Dec 29, 2023
* refactor: 범용적인 DropDown 컴포넌트를 celuveat-ui-library 배포 후 적용 (#652) * chore: celuveat-ui-library 설치 * refactor: celuveat-library를 적용, InfoDropDown 코드 수정 * fix: svg 경로로 인한 storybook 에러 해결 * refactor: celuveat-library를 적용, CelebDropDown 코드 수정 * fix: github action ci 오류 수정 * fix: 사용하지 않은 memo 제거 (#650) * refactor: 음식점 상세페이지 usequeries 처리 (#649) * refactor: RestaurantVideoList useQueries 적용 (#648) * refactor: 음식점 상세페이지 waterfall 개선 (#648) * fix: lint 에러 수정 * infra: 프론트엔드 dev cd 파이프라인 구축 (#655) (#656) * feat: progressive web app 구현 (#654) * feat: 최소단위 manifest.json 작성 및 적용 * design: PWA 적용으로 인한 바텀네브바 높이 수정 * hotfix: node 버전 수정 18.16.1 * hotfix: cd 에러 해결 yarn.lock, 캐시 제거 명령어 추가 * refactor: 메인페이지 리팩터링 (#659) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * fix: 이미지 로드동안 스켈레톤 유지시키기 (#666) * refactor: 모달 celuveat UI library 적용 (#664) * feat: 모달 라이브러리 적용 (jeremy-reusable-modal) * style: isLiked시 하트 색깔 변경 로직 줄 축수 * refactor: jeremy-reusable-modal에서 celuveat-ui-library로 마이그레이션 * feat: 에러바운더리를 이용한 에러핸들링 (#667) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * refactor: msw handler 폴더명 수정 및 랜덤 응답 로직 구현 랜덤으로 성공과 실패 응답을 보낸다. * chore: 에러핸들링 개발환경 구축 개발 모드에서 에러 오버레이 일시 중단 * refactor: 셀럽잇 추천 맛집 스켈레톤 컴포넌트 분리 (#661) * feat: 에러바운더리 구현 (#661) * style: 셀럽잇 추천맛집 서브 컴포넌트명 수정 및 에러바운더리 적용 (#661) * style: 핸들러 명 수정에 대한 적용 * design: 셀럽잇 추천 맛집 음식점 카드 좋아요 기능 보이기 (#661) * refactor: useToggleLikeNotUpdate 에러 분기 429, 401 에러 핸들링 * fix: ifram 안보이는 현상 처리 * fix: 에러 오버레이 안보이는 현상 처리 * Update frontend-dev-cd.yml --------- Co-authored-by: 황준승 <[email protected]>
shackstack
added a commit
that referenced
this pull request
Dec 29, 2023
* hotfix: 데스크탑 지도페이지에서 마커 클릭 시 나타나는 미리보기 관련 오류 수정 미리보기 위치가 고정되는 문제 개선 * hotfix: 미리보기 위치 영점 조절 * revert commit: 모달 라이브러리 롤백 * refactor: 공유하기 클립보드 링크 수정 * feat: 셀럽잇 추천 맛집 스켈레톤 적용 * fix: 지도페이지에서 음식점 카드 hover시 지도 마커 반응하지 않는 버그 수정 * refactor: 배너 스켈레톤 적용 * fix: MiniRestaurantCard 스켈레톤 border-radius 수정 * release: 프론트엔드 v4.1.0 (#668) * refactor: 범용적인 DropDown 컴포넌트를 celuveat-ui-library 배포 후 적용 (#652) * chore: celuveat-ui-library 설치 * refactor: celuveat-library를 적용, InfoDropDown 코드 수정 * fix: svg 경로로 인한 storybook 에러 해결 * refactor: celuveat-library를 적용, CelebDropDown 코드 수정 * fix: github action ci 오류 수정 * fix: 사용하지 않은 memo 제거 (#650) * refactor: 음식점 상세페이지 usequeries 처리 (#649) * refactor: RestaurantVideoList useQueries 적용 (#648) * refactor: 음식점 상세페이지 waterfall 개선 (#648) * fix: lint 에러 수정 * infra: 프론트엔드 dev cd 파이프라인 구축 (#655) (#656) * feat: progressive web app 구현 (#654) * feat: 최소단위 manifest.json 작성 및 적용 * design: PWA 적용으로 인한 바텀네브바 높이 수정 * hotfix: node 버전 수정 18.16.1 * hotfix: cd 에러 해결 yarn.lock, 캐시 제거 명령어 추가 * refactor: 메인페이지 리팩터링 (#659) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * fix: 이미지 로드동안 스켈레톤 유지시키기 (#666) * refactor: 모달 celuveat UI library 적용 (#664) * feat: 모달 라이브러리 적용 (jeremy-reusable-modal) * style: isLiked시 하트 색깔 변경 로직 줄 축수 * refactor: jeremy-reusable-modal에서 celuveat-ui-library로 마이그레이션 * feat: 에러바운더리를 이용한 에러핸들링 (#667) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * refactor: msw handler 폴더명 수정 및 랜덤 응답 로직 구현 랜덤으로 성공과 실패 응답을 보낸다. * chore: 에러핸들링 개발환경 구축 개발 모드에서 에러 오버레이 일시 중단 * refactor: 셀럽잇 추천 맛집 스켈레톤 컴포넌트 분리 (#661) * feat: 에러바운더리 구현 (#661) * style: 셀럽잇 추천맛집 서브 컴포넌트명 수정 및 에러바운더리 적용 (#661) * style: 핸들러 명 수정에 대한 적용 * design: 셀럽잇 추천 맛집 음식점 카드 좋아요 기능 보이기 (#661) * refactor: useToggleLikeNotUpdate 에러 분기 429, 401 에러 핸들링 * fix: ifram 안보이는 현상 처리 * fix: 에러 오버레이 안보이는 현상 처리 * Update frontend-dev-cd.yml --------- Co-authored-by: 황준승 <[email protected]> * release: 백엔드 v4.1 (#669) * graceful-test * graceful-test2 * chore: own 설정 추가 * chore: own 설정 수정 * chore: logback 설정 수정 * Update backend-dev-cd.yml (#657) --------- Co-authored-by: TaeyeonRoyce <[email protected]> Co-authored-by: Taeyeon <[email protected]> --------- Co-authored-by: 황준승 <[email protected]> Co-authored-by: TaeyeonRoyce <[email protected]> Co-authored-by: Taeyeon <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ 요약
모달 컴포넌트 코드 보러가기
😎 해결한 이슈